<template>
	<view
		:style="{
			backgroundColor: componentBg,
		}"
		@longpress.native.stop="handleClassifyLongpress"
	>
		<view
			class="flex align-center"
			hover-class="hoverClass"
			:style="{
				backgroundColor: titleBg,
				color: titleColor,
				padding: padding,
				fontSize: '14px',
				borderBottom: isBorder ? border : 'none',
			}"
		>
			<view
				class="flex align-center"
				:style="{
					borderRight: isBorder ? border : 'none',
					width: theadW,
					height: theadH,
				}"
			>
				<text>{{ classifyTitle }}</text>
			</view>
			
			<view
				class="flex flex-1 justify-between align-center"
				hover-class="hoverClass"
				:style="{
					height: theadH,
					padding: '0 15px 0 10px'
				}"
				@click="handleExpand()"
			>
				<text>{{ classifyName }}</text>
				<u-icon :name="isExpand ? 'arrow-up' : 'arrow-down'" size="14"></u-icon>
			</view>
		</view>
		
		<view v-if="isExpand">
			<view
				v-for="(item, index) in classifyData"
				:key="index"
				class="flex align-center"
				:style="{
					padding: padding,
					borderBottom: isBorder ? border : 'none',
					fontSize: '14px',
				}"
			>
				<view
					class="flex align-center"
					:style="{
						borderRight: isBorder ? border : 'none',
						width: theadW,
						height: theadH,
					}"
				>
					<text>{{ item.label }}</text>
				</view>
				
				<view
					class="flex flex-1 justify-between align-center"
					:style="{
						height: theadH,
					}"
				>
					<!-- 名称 -->
					<view v-if="item.prop === 'name'" class="flex-1 pad-x-10">
						<u-input
							v-if="isEdit"
							v-model="item.value"
							type="text"
							:readonly="item.readonly"
							:border="item.theme === 'table' ? 'none' : (item.border ? item.border : 'surround')"
							:placeholder="item.placeholder ? item.placeholder : '请输入名称'"
							:customStyle="{
								height: '30px',
								paddingLeft: item.theme === 'table' ? 0 : '8px',
							}"
						></u-input>
						
						<text v-else>{{ item.value }}</text>
					</view>
					
					<!-- 图件号 -->
					<view v-else-if="item.prop === 'num'" class="flex-1 pad-x-10">
						<u-input
							v-if="isEdit"
							v-model="item.value"
							type="text"
							:readonly="item.readonly"
							:border="item.theme === 'table' ? 'none' : (item.border ? item.border : 'surround')"
							:placeholder="item.placeholder"
							:customStyle="{
								height: '30px',
								paddingLeft: item.theme === 'table' ? 0 : '8px',
							}"
						></u-input>
						
						<text v-else>{{ item.value }}</text>
					</view>
					
					<!-- 单价 -->
					<view v-else-if="item.prop === 'unitPrice'" class="flex-1 pad-x-10">
						<u-input
							v-if="isEdit"
							v-model="item.value"
							type="number"
							:readonly="item.readonly"
							:border="item.theme === 'table' ? 'none' : (item.border ? item.border : 'surround')"
							:placeholder="item.placeholder ? item.placeholder : '请输入单价'"
							:customStyle="{
								height: '30px',
								paddingLeft: item.theme === 'table' ? 0 : '8px',
							}"
						></u-input>
						
						<text v-else>{{ item.value }}</text>
					</view>
					
					<!-- 附件 -->
					<view v-else-if="item.prop === 'attachment'" class="flex-1 pad-x-10">
						<view
							class="flex flex-1 align-center"
							:style="{
								height: '40px',
								// border: isBorder ? border : 'none',
								// borderRadius: isBorder ? '5px' : 'none',
								// padding: '0 8px'
							}"
							@click="handleAttachment(item)"
						>
							<view
								v-if="item.textMsgList.length > 0"
								class="flex align-center justify-center font-10 color-white"
								style="width: 40px; height: 40px; border-radius: 50%; background: #e07285;"
							>
								<text>文字</text>
							</view>
							
							<view
								v-if="item.pictureList.length > 0"
								class="flex align-center justify-center font-10 mar-l-5 color-white"
								style="width: 40px; height: 40px; border-radius: 50%; background: #f58b41;"
							>
								<text>图片</text>
							</view>
							
							<view
								v-if="item.voiceList.length > 0"
								class="flex align-center justify-center font-10 mar-l-5 color-white"
								style="width: 40px; height: 40px; border-radius: 50%; background: #2cb42e;"
							>
								<text>语音</text>
							</view>
							
							<view
								v-if="item.videoList.length > 0"
								class="flex align-center justify-center font-10 mar-l-5 color-white"
								style="width: 40px; height: 40px; border-radius: 50%; background: #16b58c;"
							>
								<text>视频</text>
							</view>
						</view>
					</view>
					
					<!-- 需求数量 -->
					<view v-else-if="item.prop === 'demand'" class="flex-1 pad-x-10">
						<u-input
							v-if="isEdit"
							v-model="item.value"
							type="number"
							:readonly="item.readonly"
							:border="item.theme === 'table' ? 'none' : (item.border ? item.border : 'surround')"
							:placeholder="item.placeholder ? item.placeholder : '请输入需求数量'"
							:customStyle="{
								height: '30px',
								paddingLeft: item.theme === 'table' ? 0 : '8px',
							}"
						></u-input>
						
						<text v-else>{{ item.value }}</text>
					</view>
					
					<!-- 申请数量 -->
					<view v-else-if="item.prop === 'apply'" class="flex-1 pad-x-10">
						<u-input
							v-if="isEdit"
							v-model="item.value"
							type="number"
							:readonly="item.readonly"
							:border="item.theme === 'table' ? 'none' : (item.border ? item.border : 'surround')"
							:placeholder="item.placeholder ? item.placeholder : '请输入申请数量'"
							:customStyle="{
								height: '30px',
								paddingLeft: item.theme === 'table' ? 0 : '8px',
							}"
						></u-input>
						
						<text v-else>{{ item.value }}</text>
					</view>
					
					<!-- 消耗数量 -->
					<view v-else-if="item.prop === 'usedQuantity'" class="flex-1 pad-x-10">
						<u-input
							v-if="isEdit"
							v-model="item.value"
							type="number"
							:readonly="item.readonly"
							:border="item.theme === 'table' ? 'none' : (item.border ? item.border : 'surround')"
							:placeholder="item.placeholder ? item.placeholder : '请输入消耗数量'"
							:customStyle="{
								height: '30px',
								paddingLeft: item.theme === 'table' ? 0 : '8px',
							}"
							@input="handleWatchUsedQuantity(item)"
						></u-input>
						
						<text v-else>{{ item.value }}</text>
					</view>
					
					<!-- 单位 -->
					<view v-else-if="item.prop === 'unit'" class="flex-1 pad-x-10">
						<u-input
							v-if="isEdit"
							v-model="item.value"
							type="text"
							:readonly="item.readonly"
							:border="item.theme === 'table' ? 'none' : (item.border ? item.border : 'surround')"
							:placeholder="item.placeholder ? item.placeholder : '请输入单位'"
							:customStyle="{
								height: '30px',
								paddingLeft: item.theme === 'table' ? 0 : '8px',
							}"
						></u-input>
						
						<text v-else>{{ item.value }}</text>
					</view>
					
					<!-- 故障件条码 -->
					<view
						v-else-if="item.prop === 'repairNo'"
						class="flex-1 color-cfc46a pad-x-10"
						@click="toAddBarcode(item)"
					>
						<text>点击添加新旧故障件条码</text>
					</view>
					
					<!-- 维修类型 -->
					<view
						v-else-if="item.prop === 'repairType'"
						class="flex align-center flex-1 color-ff0000 h-px-50 pad-x-10"
						hover-class="hoverClass"
						@click="handleSelectRepairType(item)"
					>
						<text v-if="!item.value && item.isEdit">请点击选择</text>
						<text v-else>{{ item.value }}</text>
						<u-icon v-if="item.isEdit" name="arrow-right" size="14" color="#ff0000" class="mar-l-5"></u-icon>
					</view>
					
					<!-- 故障树备注 -->
					<view
						v-else-if="item.prop === 'repairTree'"
						class="flex align-center flex-1 color-ff0000 h-px-50 pad-x-10"
						hover-class="hoverClass"
						@click="handleRepairTree(item)"
					>
						<text>{{ item.value }}</text>
					</view>
					
					<!-- 结算类型 -->
					<view
						v-else-if="item.prop === 'settlementType'"
						class="flex align-center flex-1 color-ff0000 h-px-50 pad-x-10"
						hover-class="hoverClass"
						@click="handleSelectSettlementType(item)"
					>
						<text v-if="!item.value">请点击选择</text>
						<text v-else>{{ item.value }}</text>
						<u-icon v-if="item.isEdit" name="arrow-right" size="14" color="#ff0000" class="mar-l-5"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 是否可编辑
			isEdit: {
				type: Boolean,
				default: true
			},
			
			// 是否可删除组件（因为有些情况下故障件不可删除，如现场详情 - 待维修 - 详情，在回显数据时如果存在故障件，这个故障件从后台查过来的是不可删除的）
			// 默认可以删除
			isDel: {
				type: Boolean,
				default: true
			},
			
			// 如果数据是从后台查过来的，那么需要将故障件的id带上，后面查询或者其他操作有需要
			repairOrderItemId: {
				type: String | Number | null,
				default: ''
			},
			
			// 组件背景色
			componentBg: {
				type: String,
				default: '#ffffff'
			},
			
			// 标题背景色
			titleBg: {
				type: String,
				default: '#eeeeee'
			},
			
			// 标题颜色
			titleColor: {
				type: String,
				default: '#333333'
			},
			
			// 组件内边距（距离两边的留白边距）
			padding: {
				type: String,
				default: '0 0 0 15px'
			},
			
			// 分类标题
			classifyTitle: {
				type: String,
				default: ''
			},
			
			// 分类名称
			classifyName: {
				type: String,
				default: ''
			},
			
			// 是否显示表格边框中间线条
			isBorder: {
				type: Boolean,
				default: true
			},
			
			// 表格边框中间线条设置（只有 isBorder 为 true 才生效）
			border: {
				type: String,
				default: '1px #f4f4f4 solid'
			},
			
			// 表头部分宽度
			theadW: {
				type: String,
				default: '90px'
			},
			
			// 表头部分高度
			theadH: {
				type: String,
				default: '50px'
			},
			
			// 分类数据
			classifyData: {
				type: Array,
				default: function() {
					return []
				}
			},
			
			// 是否展开故障件信息
			isExpand: {
				type: Boolean,
				default: false
			},
			
			// 当前组件数据的索引
			index: {
				type: Number,
				default: 0
			}
		},
		
		data() {
			return {
				// 维修类型名称
				repairTypeName: ''
			}
		},
		
		methods: {
			// 点击系统分类名称时的回调（展开/收起信息）
			handleExpand() {
				this.$emit('handleExpand', this.index)
			},
			
			// 点击附件的回调
			handleAttachment(row) {
				this.$emit('handleAttachment', { index: this.index, row })
			},
			
			// 监听消耗数量输入
			handleWatchUsedQuantity(row) {
				this.$emit('handleWatchUsedQuantity', { index: this.index, row })
			},
			
			// 添加新旧故障件条码
			toAddBarcode(row) {
				uni.navigateTo({
					url: `/pages/repairManage/addComBarcode/addComBarcode?index=${this.index}&repairOrderItemId=${ this.repairOrderItemId }`
				})
			},
			
			// 点击选择维修类型的回调
			handleSelectRepairType(row) {
				if (!this.isEdit) return
				if (row.isEdit === false) return
				this.$emit('handleSelectRepairType', this.index)
			},
			
			// 点击故障树备注的回调
			handleRepairTree(row) {
				console.log('故障树备注：' + row)
			},
			
			// 维修类型改变时的回调
			// name：选中的维修类型，index：系统分类索引
			handleChangeRepairType(index, name) {
				this.repairTypeName = name
			},
			
			// 点击选择结算类型的回调
			handleSelectSettlementType(row) {
				if (!this.isEdit) return
				if (row.isEdit === false) return
				this.$emit('handleSelectSettlementType', this.index)
			},
			
			// 长按组件的回调
			handleClassifyLongpress() {
				this.$emit('handleClassifyLongpress', { index: this.index, isDel: this.isDel })
			}
		}
	}
</script>

<style lang="scss">
	
</style>